<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style>
        * {margin: 0;padding: 0;}
        html,body {text-align: center;background-color: #262626}
        canvas {box-shadow: 2px 2px 2px 2px white;margin-top: 50px;background-color: white;}
        p>span {color: white;font-size: 12px}
    </style>
</head>
<body>
    <canvas width="400" height="400">浏览器不支持canvas，请更新浏览器！</canvas>
    <p>
        <span>1</span>
        <span>绿色食物</span>
        <span>2</span>
        <span>蓝色滑板</span>
        <span>3</span>
        <span>红色刹车</span>
        <span>4</span>
        <span>灰色毒药</span>
        <span>得分：0分</span>
    </p>
</body>
<script>
    var c=document.querySelector('canvas');
    var ctx=c.getContext('2d');
    var span=document.querySelectorAll('p span')
    
    //创建框架
    function createStroke(x1,y1,x2,y2){
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.strokeStyle='lightGray';
        ctx.stroke();
    }
    for(var i=0;i<20;i++){
        createStroke(0,i*20,400,i*20);
        createStroke(i*20,0,i*20,400);
    }
    
    function randFn(min,max){
        return Math.round(Math.random()*(max-min))+min;
    }
    //生成蛇
    var snake={
        x:randFn(5,15)*20,
        y:randFn(5,15)*20,
        speed:20,
        draw:function(){
            ctx.beginPath();
            ctx.fillStyle='cyan';
            ctx.fillRect(this.x,this.y,19,19);
            ctx.strokeStyle="white"
            ctx.strokeRect(this.x,this.y,19,19);
            
        }
    }
//    snake.draw();
    //随机生成道具
    var xy=[];
    function isNewxy(){
        var m={};
        var Nx=randFn(2,18)*20;
        var Ny=randFn(2,18)*20;
        m={
            aa:Nx,
            bb:Ny
        }
        xy.push(m);
    }
    isNewxy();
    //键盘事件
    var isLeft = 0;
    var isRight = 0;
    var isUp = 1;
    var isDown = 0;
    window.onkeydown = function (event) {
        var e = event || window.event
        switch (e.keyCode) {
        case 37:
            isLeft = 1;
            isUp = 0;
            isRight = 0;
            isDown = 0;
            break;
        case 38:
            isLeft = 0;
            isUp = 1;
            isRight = 0;
            isDown = 0;
            break;
        case 39:
            isLeft = 0;
            isUp = 0;
            isRight = 1;
            isDown = 0;
            break;
        case 40:
            isLeft = 0;
            isUp = 0;
            isRight = 0;
            isDown = 1;
            break;
        default:
            break;
        }
    }
    function moveSnake(){
        snake.draw();
        if (isLeft) {
            snake.x-=snake.speed;
            }
        if (isRight) {
            snake.x+=snake.speed;
            }
        if (isUp) {
            snake.y-=snake.speed;
            }
        if (isDown) {
            snake.y+=snake.speed;
            }
        if(snake.x<=-20){
//            snake.x=380;
            snake.x=-20;
            clearInterval(timer)
        }
        if(snake.x>=400){
//            snake.x=0;
            snake.x=400;
            clearInterval(timer)
        }
        if(snake.y<=-20){
//            snake.y=380;
            snake.y=-20;
            clearInterval(timer)
        }
        if(snake.y>=400){
//            snake.y=0;
            snake.y=400;
            clearInterval(timer)
        }
        snakeArr.push(snake.x,snake.y);
    }
    //动起来 
    var timer=null;
    timer=setInterval(function(){
        ctx.clearRect(0,0,400,400);
        for(var i=0;i<20;i++){
            createStroke(0,i*20,400,i*20);
            createStroke(i*20,0,i*20,400);
        }
        moveSnake();
        cST();
//        ins.draw();
        cIns();
        isColl();
        console.log(xy.length);
        console.log(insArr.length)
    },300);
    //生成尾部跟随运动
    var snakeArr=[];
    var insArr=[];
    var num=3;
    function cST(){
        for(var i=0;i<num;i++){
            var x=snakeArr[snakeArr.length-(6+i*2)];
            var y=snakeArr[snakeArr.length-(5+i*2)];
            ctx.beginPath();
            ctx.fillStyle='tomato';
            ctx.fillRect(x,y,19,19);
            ctx.strokeStyle="white"
            ctx.strokeRect(x,y,19,19);
            if(snakeArr.length>num*2+3){
                snakeArr.splice(0,1);
            }
        }
    }
    //碰撞检测
    var isC=false;
    function isColl(){
        var a1=snakeArr[snakeArr.length-2];
        var b1=snakeArr[snakeArr.length-3];
        var a2=insArr[0];
        var b2=insArr[1];
        if(a1==a2&&b1==b2){
            insArr=[];
//            cIns();
            isNewxy();
            num+=1;
            span[8].innerHTML='得分：'+(num-3)+'分';
        }
    }
    function cIns(){
        var x=xy[xy.length-1].aa;
        var y=xy[xy.length-1].bb;
        ctx.beginPath();
        ctx.fillStyle='green';
        ctx.fillRect(x,y,19,19);
        ctx.strokeStyle="white"
        ctx.strokeRect(x,y,19,19);
        insArr.push(x,y);
        if(xy.length>=10){
            xy.splice(0,1);
        }
    }
    
    
    </script>
</html>








